import React,{PropTypes} from 'react'
import { connect } from 'react-redux'
import Cookie from 'react-cookie'
import RComponent from '../../components'
import styles from './login.scss'
import {setTitle} from '../../actions/page'

class Login extends RComponent {
    constructor(props, context){
        super(props,context)
        this.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        this.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        this.deviation = 42;
        this.state = {
            // width:this.width,
            // height:this.height-this.deviation
            height:this.height
        }
    }

    componentDidMount(){
        window.addEventListener("resize", this.updateDimensions.bind(this));
        window.addEventListener('message',this.handleMessage.bind(this))
        this.props.dispatch(setTitle({title:'登录',showHome:true}))
        Cookie.save('token',1,{path:'/'})
    }

    componentWillUnmount(){
        window.removeEventListener("resize", this.updateDimensions.bind(this));
        window.removeEventListener('message',this.handleMessage.bind(this))
    }

    updateDimensions(){
        let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        this.setState({
            // width:width,
            // height:height-this.deviation
            height:height
        })
    }

    handleMessage(e){
        let loggedIn = e.data
        if(loggedIn && loggedIn == 'loggedIn'){
            // location.reload();
            Cookie.save('token',1,{path:'/'})
            // save('userId', userId, { path: '/' });
            this.context.router.replace('/');
        }

    }

    render(){
        let loginUrl = 'http://www.baidu.com/?target='
        loginUrl += encodeURIComponent('http://'+location.host+'/#/loginSuccess')
        return (
            <div className='Page-body'>
                <div className='loginBox' style={{}}>
                    {/*<iframe src={loginUrl} width={'100%'} height={this.state.height} className='loginFrame' frameBorder='0'></iframe>*/}
                </div>
            </div>
        )
    }
}

Login.propTypes = {
    loading:PropTypes.bool,
    isLogin:PropTypes.bool
}

export default connect(
    state => ({
        loading:state.page.loading,
        isLogin:state.credentials.isLogin
    })
)(Login)
